//监控区域 匿名函数自调用
(function () {
  $(".monitor .tabs a")
    .click(function () {
      $(this).addClass("active").siblings().removeClass("active");
      var index = $(this).index();
      $(".monitor .content").eq(index).show().siblings(".content").hide();
    })
    .eq(0)
    .trigger("click"); //用js模拟人的点击事件

  //无缝滚动效果
  $(".marquee-view .marquee").each(function () {
    // console.log($(this));
    var rows = $(this).children().clone();
    $(this).append(rows);
  });
})();

// 点位监控区域
(function () {
  var myChart = echarts.init(document.querySelector(".pie"));
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff",
    ],
    series: [
      {
        name: "点位监控",
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" },
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10,
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8,
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

//全国用户总量统计
(function () {
  var myChart = echarts.init(document.querySelector(".bar"));
  var item = {
    name: "",
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: "#254065",
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: "opacity:0",
    },
  };
  var option = {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "red", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "blue", // 100% 处的颜色
        },
      ],
      globalCoord: false, // 缺省为 false
    },
    tooltip: {
      trigger: "item", //axis
    },
    // 直角坐标系内绘图网格（区域）
    grid: {
      top: "3%",
      right: "3%",
      bottom: "3%",
      left: "0%",
      //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
      containLabel: true,
      // 是否显示直角坐标系网格
      show: true,
      //grid 四条边框的颜色
      borderColor: "rgba(0, 240, 255, 0.3)",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "上海",
          "广州",
          "北京",
          "深圳",
          "合肥",
          "",
          "......",
          "",
          "杭州",
          "厦门",
          "济南",
          "成都",
          "重庆",
        ],
        axisTick: {
          // true意思：图形和刻度居中中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          // 不显示刻度
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // x坐标轴颜色设置
        axisLine: {
          show: false, // 去除轴线
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          // true意思：图形和刻度居中中间
          // false意思：图形在刻度之间
          alignWithLabel: false,
          // 不显示刻度
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        // x坐标轴颜色设置
        axisLine: {
          show: false, // 去除轴线
        },
        // y轴 分割线的样式
        splitLine: {
          lineStyle: {
            color: "rgba(0, 240, 255, 0.3)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240,
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// 销售额统计
(function () {
  var myChart = echarts.init(document.querySelector(".line"));

  var data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  };

  var option = {
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["邮件营销", "联盟广告"],
      textStyle: {
        color: "#4c9bfd", // 图例文字颜色
      },
      right: "10%", // 距离右边10%
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true, // 包含刻度文字在内
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      axisTick: {
        show: false, // 去除刻度线
      },
      axisLabel: {
        color: "#4c9bfd", // 文本颜色
      },
      axisLine: {
        show: false, // 去除轴线
      },
      boundaryGap: false, // 去除轴内间距
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false, // 去除刻度
      },
      axisLabel: {
        color: "#4c9bfd", // 文字颜色
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a", // 分割线颜色
        },
      },
    },
    series: [
      {
        name: "预期销售额",
        data: data.year[0],
        type: "line",
        smooth: true,
      },
      {
        name: "实际销售额",
        data: data.year[1],
        type: "line",
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });

  //排他思想
  var index = 0;
  $(".sales .caption a").on("click", function () {
    $(this).addClass("active").siblings().removeClass("active");
    // date.getDay() 0
    // $(this).attr('data-type')
    var arr = ["year", "quarter", "month", "week"];
    index = $(this).index() - 1;
    // console.log(arr[index]);
    var currData = data[arr[index]]; //data['year']
    // 修改图表1的数据
    option.series[0].data = currData[0]; //第一根线的数据
    // 修改图表2的数据
    option.series[1].data = currData[1];
    // 重新设置数据  让图标重新渲染
    myChart.setOption(option); //重绘
  });

  var timer;
  fn();
  function fn() {
    timer = setInterval(function () {
      index++;
      if (index >= 4) {
        index = 0;
      }
      $(".sales .caption a").eq(index).trigger("click");
    }, 1000);
  }

  // $('.sales').mouseenter().mouseleave()
  $(".sales").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      fn();
    }
  );
})();

// var time = new Date();
// console.log(time.getDay());
// var arr = ['周日','周一','周二','周三']

// arr[time.getDay()]

// 渠道分布
(function () {
  var myChart = echarts.init(document.querySelector(".radar"));
  // Schema:
  // date,AQIindex,PM2.5,PM10,CO,NO2,SO2
  var dataBJ = [[90, 19, 56, 11, 34]];

  var lineStyle = {
    normal: {
      width: 1,
      opacity: 0.5,
    },
  };

  var option = {
    backgroundColor: "#161627",
    // visualMap: {
    //     show: true,
    //     min: 0,
    //     max: 20,
    //     dimension: 6,
    //     inRange: {
    //         colorLightness: [0.5, 0.8]
    //     }
    // },
    radar: {
      radius: "65%",
      center: ["50%", "50%"],
      indicator: [
        { name: "机场", max: 100 },
        { name: "商场", max: 100 },
        { name: "火车站", max: 100 },
        { name: "汽车站", max: 100 },
        { name: "地铁", max: 100 },
      ],
      shape: "circle",
      splitNumber: 4,
      name: {
        textStyle: {
          color: "#4c9bfd",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)",
        },
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.5)",
        },
      },
    },
    series: [
      {
        name: "北京",
        type: "radar",
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: "none",
        itemStyle: {
          color: "#F9713C",
        },
        areaStyle: {
          color: "rgba(238, 197, 102, 0.6)",
          opacity: 0.1,
        },
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// 一季度销售进度
(function () {
  var myChart = echarts.init(document.querySelector(".gauge"));

  var option = {
    series: [
      {
        name: "访问来源",
        type: "pie",
        radius: ["40%", "70%"],
        labelLine: {
          show: false,
        },
        startAngle: 180, //起始角度 默认是从90度开始
        data: [
          { value: 100, name: "" },
          { value: 100, name: "" },
          { value: 200, name: "", itemStyle: { color: "transparent" } },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();

// webapi数据拼到页面有三种方式
// 1. document.write 不推荐，因为会导致页面重绘
// 2. document.createELement 阅读起来比较清晰 var li =document.createElement('li') appendChild
// 3. innerHTML 性能最好 ---> html()方法
// 全国热榜
(function () {
  // 数组 --> 遍历
  var hotData = [
    {
      city: "北京", // 城市
      sales: "25, 179", // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: "可爱多", num: "9,086", flag: true },
        { name: "娃哈哈", num: "8,341", flag: true },
        { name: "喜之郎", num: "7,407", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "6,724", flag: false },
        { name: "好多鱼", num: "2,170", flag: true },
      ],
    },
    {
      city: "河北",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "3,457", flag: false },
        { name: "娃哈哈", num: "2,124", flag: true },
        { name: "喜之郎", num: "8,907", flag: false },
        { name: "八喜", num: "6,080", flag: true },
        { name: "小洋人", num: "1,724", flag: false },
        { name: "好多鱼", num: "1,170", flag: false },
      ],
    },
    {
      city: "上海",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "2,345", flag: true },
        { name: "娃哈哈", num: "7,109", flag: true },
        { name: "喜之郎", num: "3,701", flag: false },
        { name: "八喜", num: "6,080", flag: false },
        { name: "小洋人", num: "2,724", flag: false },
        { name: "好多鱼", num: "2,998", flag: true },
      ],
    },
    {
      city: "江苏",
      sales: "23,252",
      flag: false,
      brands: [
        { name: "可爱多", num: "2,156", flag: false },
        { name: "娃哈哈", num: "2,456", flag: true },
        { name: "喜之郎", num: "9,737", flag: true },
        { name: "八喜", num: "2,080", flag: true },
        { name: "小洋人", num: "8,724", flag: true },
        { name: "好多鱼", num: "1,770", flag: false },
      ],
    },
    {
      city: "山东",
      sales: "20,760",
      flag: true,
      brands: [
        { name: "可爱多", num: "9,567", flag: true },
        { name: "娃哈哈", num: "2,345", flag: false },
        { name: "喜之郎", num: "9,037", flag: false },
        { name: "八喜", num: "1,080", flag: true },
        { name: "小洋人", num: "4,724", flag: false },
        { name: "好多鱼", num: "9,999", flag: true },
      ],
    },
  ];

  var str = "";
  // es6的模板字符串 ${变量} ${数据} ${三元表达式}
  $.each(hotData, function (index, item) {
    str += `
      <li>
        <span>${item.city} </span>
        <span>${item.sales} <s class="${
      item.flag ? "icon-up" : "icon-down"
    }"></s></span>
      </li>
    `;
  });

  // console.log(str);
  $(".sup").html(str);

  // 鼠标经过：sup当前的高亮（排他思想） 右侧 sub渲染的就是当前的sup高亮对应的brands数据
  var index = 0;
  $(".sup")
    .on("mouseenter", "li", function () {
      $(this).addClass("active").siblings().removeClass("active");
      //当前高亮的索引值
      index = $(this).index();
      render(index);
    })
    .children()
    .eq(0)
    .trigger("mouseenter");

  //自动切换
  var timer = setInterval(function () {
    index++;
    if (index >= 5) {
      index = 0;
    }
    render(index);
  }, 1000);

  //鼠标移入，自动切换就停下来，鼠标离开，自动切换恢复
  // 要么用两个事件 mounseenter mouseleave --> hover
  $(".sup").hover(
    function () {
      clearInterval(timer);
    },
    function () {
      timer = setInterval(function () {
        index++;
        if (index >= 5) {
          index = 0;
        }
        render(index);
      }, 1000);
    }
  );

  //由于渲染右侧的内容很多地方都要做一遍，所以封装一个函数
  function render(index) {
    $(".sup li").eq(index).addClass("active").siblings().removeClass("active");
    var arr = hotData[index].brands; //一级标题对应的二级内容 数组 --> 遍历 for --> $.each
    var str = "";
    $.each(arr, function (index, item) {
      str += `
        <li>
          <span>${item.name}</span>
          <span>
            ${item.num}
            <s class="${item.flag ? "icon-up" : "icon-down"}"></s>
          </span>
        </li>
      `;
    });
    $(".sub").html(str);
  }
})();
